<template>
  <div class="text-editor">
    <div class="editor-toolbar">
      <EmojiPop ref="emoji" @chooseEmoji='chooseEmoji' v-if="!hideEmoji" />
      <span class="toolbar-tag" v-for="(tag, index) in toolTags" @click="addEditorToHtml(tag)">{{ tag }}</span>
    </div>
    <quill-editor
      class="quill-editor-wrap"
      ref="myQuillEditor"
      v-model="noticeContent"
      :content="content"
      :options="{...editorOption, ...options}"
      placeholder="请输入"
      @change="onEditorChange($event)"
    />
  </div>
</template>
<script>
import { quillEditor, Quill } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import EmojiPop from '@/components/EmojiPop';
export default {
  data() {
    return {
      content: '',
      showImageText: false,
      showAddMini: false,
      editorOption: {
        modules: {
          // 隐藏工具栏
          toolbar: false,
        },
        placeholder: '请输入欢迎语'
      },
      fileList:[],
      noticeContent:null,
    }
  },
  components: {
    quillEditor,
    EmojiPop,
  },
  props: {
    options: {
      type: Object,
      default: {}
    },
    hideFooter: {
      type: Boolean,
      default: false
    },
    toolTags: {
      type: Array,
      default: [],
    },
    hideEmoji: {
      type: Boolean,
      default: false
    },
    hideImageBtn: {
      type: Boolean,
      default: false
    },
    hideVideoBtn: {
      type: Boolean,
      default: false
    },
    hideImageText: {
      type: Boolean,
      default: false
    },
    hideMini: {
      type: Boolean,
      default: false
    },
  },
  watch:{
    'noticeContent'(val){
      this.$nextTick(()=>{
        this.setCursorToEnd();
      })

    }
  },
  mounted() {
    this.$nextTick(()=>{
      const quill = this.$refs.myQuillEditor.quill
      // 获取光标所在位置
      quill.setSelection(0);
    })
  },
  methods: {
    setCursorToEnd() {
      // 获取quill实例
      const quill = this.$refs.myQuillEditor.quill;
      // 设置光标位置在最后
      const length = quill.getLength();
      console.log('length光标长度', length);
      this.$nextTick(() => {
        quill.setSelection(length, length + 1);
      })

    },
    handleExceed(e){

    },
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    },
    //选择表情包
    chooseEmoji(icon){
      const quill = this.$refs.myQuillEditor.quill
      // 获取光标所在位置
      const length = quill.selection.savedRange.index
      // 插入video
      quill.insertEmbed(length, 'IconEmbed', {src: icon.icon, title: icon.name}) // 'video'即为上面定义的blotName
      // 调整光标到最后
      quill.setSelection(length + 1)
      // 隐藏表情浮窗
      this.$refs.emoji.showemoji = false
    },
    addEditorToHtml(tag) {
      const quill = this.$refs.myQuillEditor.quill;
      // 获取光标所在位置
      const length = quill.selection.savedRange.index;
      quill.insertEmbed(length, 'StockEmbed', `<div class="edit-tag">${tag}</div>`) // 'video'即为上面定义的blotName
         // setTimeout(()=>{
         //   // 调整光标到最后
         //   quill.setSelection(length + 1);
         //   console.log('length--',length);
         // },500)


    },
    onHandCloseImageTextDialog() {
      this.showImageText = false
    },
    onHandCloseAddMiniDialog() {
      this.showAddMini = false
    }
  },
}

const BlotsEmbed = Quill.import('blots/embed')

class StockEmbed extends BlotsEmbed {
  static create(value) {
    const node = super.create(value);
    node.setAttribute('contenteditable', 'true');
    node.setAttribute('style', 'display: flex;align-items: center;height:26px;');
    //   设置自定义html
    node.innerHTML = value;
    return node;
  }
  // 去除字符串模板(``)语法中存在的空格
  static transformValue(value) {
    let handleArr = value.split('\n');
    handleArr = handleArr.map((e) => e.replace(/^[\s]+/, '').replace(/[\s]+$/, ''));
    return handleArr.join('');
  }

  // 返回节点自身的value值 用于撤销操作
  static value(node) {
    return node.innerHTML;
  }
}

class EmojiEmbed extends BlotsEmbed {
  static create(value) {
    const node = super.create(value);
    node.setAttribute('title', value.title);
    node.setAttribute('src', value.src);
    node.setAttribute('style', 'width: 24px;height:24px;');
    return node;
  }

  static value(node) {
    return {
      src: node.getAttribute('src'), // 注意这里和上面的属性和值反过来相对
      title: node.getAttribute('title'),
    }
  }
}

StockEmbed.blotName = 'StockEmbed';
StockEmbed.className = 'embed-tag';
StockEmbed.tagName = 'div';

EmojiEmbed.blotName = 'IconEmbed';
EmojiEmbed.className = 'embed-emoji';
EmojiEmbed.tagName = 'img';

Quill.register(StockEmbed, true);
Quill.register(EmojiEmbed, true);
</script>
<style lang="scss" scoped>
.text-editor {
  width: 100%;
  border: 1px solid #e9e9e9;
  .editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fafafa;
    border-bottom: 1px solid #e9e9e9;
    .toolbar-tag {
      padding: 3px 8px;
      background: #fff;
      cursor: pointer;
      border-radius: 4px;
      color: rgba(0,0,0,.65);
      font-size: 12px;
      line-height: 20px;
      border: 1px solid #e9e9e9;
    }
  }
  .quill-editor-wrap {
    min-height: 200px;
    ::v-deep .ql-container.ql-snow {
      border: none;
    }
    ::v-deep .ql-editor.ql-blank::before {
      font-style: normal;
    }
    ::v-deep .ql-editor p {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    ::v-deep .edit-tag {
      color: rgba(0, 0, 0, .85);
      background: #eff2fe;
      border-radius: 2px;
      border: 1px solid #d5ddfb;
      margin: 0 3px 3px;
      padding: 2px 7px;
      font-size: 12px;
      width: auto;
    }
  }
  .editor-footer {
    display: flex;
    align-items: center;
    padding: 8px;
    background: #f3f3f3;
    border: 1px solid #e9e9e9;
    gap: 8px;
    .content-count {
      margin-left: 8px;
      color: rgba(0, 0, 0, .45);
      font-size: 14px;
      line-height: 22px;
    }
  }
}
</style>
